

<template>
    <tm-app class="addService" bgImg="f5">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom:none;"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title">选择图标</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>

        <view
            class="content"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="icons d-flex wrap j-between">
                <view class="icon_box" v-for="i in iconArrs" @tap="selectedIcon=i">
                    <image class="img" :src="`/static/createCircle/${i}-h.png`"></image>
                    <image v-show="selectedIcon===i" class="checked" src="/static/checked.png"></image>

                </view>
            </view>
        </view>

        <tm-button class="btn_main w-center" :width="690" :shadow="-1"
                :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="goBack"
                label="下一步">确定</tm-button>

    </tm-app>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onReady, onShow, onLoad,onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { getGroupMember } from "@/api/api";

import { config as configStore } from "@/store/config";


const iconArrs = ref(['10004','10005','10006','10007','10008','10009','10010','10011','10012','10013','10014','10015','10016','10017','10018','10019','10020','10021','10022','10023'])

const goBack = () => {
    uni.$emit('selectedIconChange',selectedIcon.value)
    uni.navigateBack();
};


const userData: any = userDataStore();

const systemInfo: any = systemInfoStore();

const bool = ref(false);
const selectedIcon = ref('');

const handleChange = (b:boolean) =>{
    bool.value = b;
}


onReady(() => {});

onLoad((option: any) => {
    if (option.selectedIcon) {
        selectedIcon.value = option.selectedIcon;
    }
});

onUnload(() => {});

onShow(() => {});
</script>

<style lang="scss" scoped>
.addService{

    .content{
        position:absolute;
        width:750rpx;
        left:0;
        right:0;
        padding-top:20rpx;
        bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
        bottom: calc(env(safe-area-inset-bottom) + 140rpx);
        .icons{
            width:710rpx;
            padding:20rpx 25rpx;
            margin:0 auto;
            gap:20rpx 0rpx;
            border-radius: 20rpx;
            background:#fff;
            .icon_box{
                position:relative;
                width:150rpx;
                height:150rpx;
                border:1px solid #cecece;
                .img{
                    width:150rpx;
                    height:150rpx;
                }

                .checked{
                    position:absolute;
                    width:30rpx;
                    height:30rpx;
                    top:8rpx;
                    left:8rpx;
                }
            }

        }
    }

    .btn_main {
        position: fixed;
        display: block;
        height: 80rpx;
        border-radius: 20rpx;
        line-height: 80rpx;
        /*
		bottom: calc(constant(safe-area-inset-bottom));
        bottom: calc(env(safe-area-inset-bottom));
		*/
		bottom: 50rpx;
        z-index: 100;
    }

}
</style>
